Skip to content

Sentry replay customization#12

Open
sfanahata wants to merge 3 commits intomainfrom
sentry-replay-customization
Open

Sentry replay customization#12
sfanahata wants to merge 3 commits intomainfrom
sentry-replay-customization

Conversation

@sfanahata
Copy link
Copy Markdown
Owner

Updating Sentry session replay to capture more. Adding notes about Sentry functionality.

@vercel
Copy link
Copy Markdown

vercel bot commented Aug 12, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Project Deployment Preview Comments Updated (UTC)
fitfest Ready Preview Comment Aug 12, 2025 5:38pm

@rohan-at-sentry
Copy link
Copy Markdown

@sentry review

Comment on lines 19 to +20
- **ORM:** Prisma
- **Authentication:** NextAuth.js
- **Authentication:** NextAuth.js / sendgrid for magic login
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The README mentions adding sendgrid for magic login, but there's no actual implementation of sendgrid or magic login functionality in the codebase. This creates a discrepancy between documentation and actual features. Consider removing this addition until the feature is actually implemented, or create a tracking issue for the feature implementation.

Did we get this right? 👍 / 👎 to inform future reviews.

Comment on lines +53 to +56
// Disable source maps functionality
sourcemaps: {
disable: false,
},
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The sourcemaps configuration is contradictory. You're setting disable: false which means sourcemaps are enabled, but the property name suggests disabling. This configuration appears to conflict with the existing hideSourceMaps: true setting below. Additionally, this sourcemaps configuration format doesn't appear to be a standard Next.js configuration option. Consider removing this or clarifying the intent.

Did we get this right? 👍 / 👎 to inform future reviews.

Comment on lines 9 to +10
// Define how likely Replay events are sampled.
// This sets the sample rate to be 10%. You may want this to be 100% while
// in development and sample at a lower rate in production
replaysSessionSampleRate: 0.1,
replaysSessionSampleRate: 1.0,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting replaysSessionSampleRate to 1.0 (100%) will capture replay sessions for ALL users, which can be very expensive and may impact performance in production. This should be much lower (typically 0.1 or 0.01) for production environments. Consider using environment-based configuration.

Did we get this right? 👍 / 👎 to inform future reviews.

Comment on lines +15 to +17
// NOTE: This will disable built-in masking. Only use this if your site has no sensitive data, or if you've already set up other options for masking or blocking relevant data, such as 'ignore', 'block', 'mask' and 'maskFn'.
maskAllText: false,
blockAllMedia: false,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting both maskAllText: false and blockAllMedia: false completely disables Sentry's built-in privacy protections. This is a significant security concern as it will capture all user text input (including potentially sensitive data like passwords, PII, etc.) and all media. The comment acknowledges this but the implementation is still risky. Consider implementing custom masking rules instead.

Did we get this right? 👍 / 👎 to inform future reviews.

Comment on lines +1 to +188
---
title: "Next.js"
description: Learn how to set up and configure Sentry in your Next.js application using the installation wizard, capture your first errors, and view them in Sentry.
sdk: sentry.javascript.nextjs
categories:
- javascript
- browser
- server
- server-node
---

<PlatformContent includePath="llm-rules-platform" />

<PlatformContent includePath="getting-started-prerequisites" />

## Features

In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/).


## Step 1: Install

To install Sentry using the installation wizard, run the following command within your project:

```bash
npx @sentry/wizard@latest -i nextjs
```

The wizard guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.

Select which Sentry features you plan to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.

<OnboardingOptionButtons
options={["error-monitoring", "performance", "session-replay", "user-feedback", "logs"]}
/>

<PlatformContent includePath="getting-started-features-expandable" />

This guide assumes that you enable all features and allow the wizard to create an example page and route. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later.

<Expandable title="What does the installation wizard change inside your application?">

- Creates config files with the default `Sentry.init()` calls for all runtimes (Node.js, Browser, and Edge)
- Adds a Next.js instrumentation hook to your project (`instrumentation.ts`)
- Creates or updates your Next.js config with the default Sentry settings
- Creates error handling components (`global-error.(jsx|tsx)` and `_error.jsx` for the Pages Router) if they don't already exist
- Creates `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`)
- Adds an example page and route to your application to help verify your Sentry setup

</Expandable>

## Step 2: Verify Your Setup

<Include name="nextjs-turbopack-warning-expandable.mdx" />

If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard:

1. Open the example page `/sentry-example-page` in your browser. For most Next.js applications, this will be at localhost.
2. Click the "Throw error" button. This triggers two errors:

- a frontend error
- an error within the API route

Sentry captures both of these errors for you. Additionally, the button click starts a performance trace to measure the time it takes for the API request to complete.

<Alert level="success" title="Tip">

Don't forget to explore the example files' code in your project to understand what's happening after your button click.

</Alert>

### View Captured Data in Sentry

Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).

<PlatformContent includePath="getting-started-browser-sandbox-warning" />

<PlatformContent includePath="getting-started-verify-locate-data" />

## Step 3: Configure

If you wish to further customize the Sentry configurations from the wizard, here are the configuration files the wizard will create:

<Alert level="info">
Logs configuration is included in these snippets when selected, but are not included in the wizard.
</Alert>

### Client-Side Configuration

```javascript {tabTitle:Client} {filename:instrumentation-client.(js|ts)}
import * as Sentry from "@sentry/nextjs";

Sentry.init({
dsn: "___PUBLIC_DSN___",

// Adds request headers and IP for users, for more info visit:
// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
sendDefaultPii: true,

integrations: [
// ___PRODUCT_OPTION_START___ performance
Sentry.browserTracingIntegration(),
// ___PRODUCT_OPTION_END___ performance
// ___PRODUCT_OPTION_START___ session-replay
Sentry.replayIntegration(),
// ___PRODUCT_OPTION_END___ session-replay
// ___PRODUCT_OPTION_START___ user-feedback
Sentry.feedbackIntegration({
// Additional SDK configuration goes in here, for example:
colorScheme: "system",
}),
// ___PRODUCT_OPTION_END___ user-feedback
],
// ___PRODUCT_OPTION_START___ logs

// Enable logs to be sent to Sentry
_experiments: { enableLogs: true },
// ___PRODUCT_OPTION_END___ logs

// ___PRODUCT_OPTION_START___ performance
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
// Learn more at
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
tracesSampleRate: 1.0,
// ___PRODUCT_OPTION_END___ performance
// ___PRODUCT_OPTION_START___ session-replay

// Capture Replay for 10% of all sessions,
// plus for 100% of sessions with an error
// Learn more at
// https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
// ___PRODUCT_OPTION_END___ session-replay
});
```

### Server-Side Configuration

```javascript {tabTitle:Server} {filename:sentry.server.config.(js|ts)}
import * as Sentry from "@sentry/nextjs";

Sentry.init({
dsn: "___PUBLIC_DSN___",

// Adds request headers and IP for users, for more info visit:
// https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
sendDefaultPii: true,
// ___PRODUCT_OPTION_START___ logs

// Enable logs to be sent to Sentry
_experiments: { enableLogs: true },
// ___PRODUCT_OPTION_END___ logs

// ___PRODUCT_OPTION_START___ performance
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
// Learn more at
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
tracesSampleRate: 1.0,
// ___PRODUCT_OPTION_END___ performance
});
```

For detailed manual setup instructions, see our [manual setup guide](/platforms/javascript/guides/nextjs/manual-setup/).

## Next Steps

At this point, you should have integrated Sentry into your Next.js application and should already be sending error and performance data to your Sentry project.

Now's a good time to customize your setup and get the most out of Sentry's features:

- Customize your server-side insights by [instrumenting Next.js server actions](/platforms/javascript/guides/nextjs/apis/#server-actions), and use [options](/platforms/javascript/guides/nextjs/configuration/options/) to fully customize your error handling. For example, use [beforeSend](/platforms/javascript/guides/nextjs/configuration/options/#before-send) to filter out errors.
- Send more details about errors and events by [manually capturing errors](/platforms/javascript/guides/nextjs/usage/), and try the [initialScope](/platforms/javascript/guides/nextjs/configuration/options/#initialscope) option to set context like global tags or user details for your errors.
- Get visual playback of user sessions with [Session Replay](/platforms/javascript/guides/nextjs/session-replay/), and [customize](/platforms/javascript/guides/nextjs/session-replay/configuration/) it to set privacy and capture options.
- Find the root of any issue faster by customizing your [traces](/platforms/javascript/guides/nextjs/tracing/) with [sending span metrics](/platforms/javascript/guides/nextjs/tracing/span-metrics/).
- Hungry to learn even more about what Sentry can do? Check out our [product walkthroughs](/product/walkthrough/).
- Learn more about our [Vercel integration](/organization/integrations/deployment/vercel/) to automatically send your Vercel deployments to Sentry.

<Expandable permalink={false} title="Are you having problems setting up the SDK?">

- If you encountered issues with our installation wizard, try [setting up Sentry manually](/platforms/javascript/guides/nextjs/manual-setup/)
- [Get support](https://sentry.zendesk.com/hc/en-us/)

</Expandable>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file appears to be documentation content that may have been accidentally committed. The filename 'hold.mdx' suggests it might be temporary content. If this is not intended to be part of the application, it should be removed. If it is intended, it should be properly integrated into the application structure and given a more descriptive name.

Did we get this right? 👍 / 👎 to inform future reviews.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants